<template>
	<div class="contents">
		<!-- <el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="全部" name="first" />
			<el-tab-pane label="待确认" name="second" />
			<el-tab-pane label="待发货" name="third" />
			<el-tab-pane label="待收货" name="fourth" />
			<el-tab-pane label="部分发货" name="fifth" />
			<el-tab-pane label="待付款" name="six" />
			<el-tab-pane label="已完成" name="seven" />
			<el-tab-pane label="退货" name="eight" />
		</el-tabs> -->
		<el-form class="demo-form-inline" ref="ruleForm" :inline="true" label-position="right" label-width="80px"
			:model="dataFilter" style="padding: 20px 0;">
			<el-form-item label="下单日期:" prop="ctime">
				<el-date-picker v-model="dataFilter.ctime" class="writeWidth" end-placeholder="结束日期"
					range-separator="-" start-placeholder="开始日期" type="daterange" value-format="yyyy-MM-dd" />
			</el-form-item>
			<el-form-item label="客户信息:" prop="order_no">
				<el-input v-model="dataFilter.order_no" class="writeWidth" placeholder="输入客户名称/订单号/收货手机"  clearable/>
			</el-form-item>
			<el-form-item :style="{ visibility: !openCol ? 'hidden' : 'visible' }">
				<el-button type="primary" @click="handleSearch">查询</el-button>
				<!-- <el-button>导出</el-button> -->
			</el-form-item>
			<el-form-item>
				<el-button style="margin-left: 85px;" type="text" @click="clickOpen">
					<span :style="{ visibility: openCol ? 'hidden' : 'visible' }">
						收起
					</span>
					高级筛选
					<vab-icon :icon="openCol ? 'arrow-down-s-line' : 'arrow-up-s-line'" />
				</el-button>
			</el-form-item>
			<!-- <br /> -->
			<div v-show="!openCol">
				<!-- <el-form-item label="发货日期:" prop="delivery_date">
					<el-date-picker v-model="dataFilter.delivery_date" class="writeWidth" end-placeholder="结束日期"
						range-separator="-" start-placeholder="开始日期" type="daterange" value-format="yyyy-MM-dd" />
				</el-form-item> -->
				<el-form-item label="签收日期:" prop="sign_time">
					<el-date-picker v-model="dataFilter.sign_time" class="writeWidth" end-placeholder="结束日期"
						range-separator="-" start-placeholder="开始日期" type="daterange" value-format="yyyy-MM-dd" />
				</el-form-item>
				<!-- <el-form-item label="送货日期:" prop="deliveryDate">
					<el-select v-model="dataFilter.deliveryDate" class="writeWidth" placeholder="请选择" clearable>
						<el-option v-for="item in opt1" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item> -->
				<!-- <el-form-item label="付款状态:" prop="payStatus">
					<el-select v-model="dataFilter.payStatus" class="writeWidth" placeholder="请选择" clearable>
						<el-option v-for="item in opt2" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item> -->
				<el-form-item label="下单金额:" prop="payStatus" >
					<el-input style="width: 101px;" placeholder="请输入" v-model="totalFirst" clearable/>
					<span style="width: 31px; display: inline-block; text-align: center;">
						—
					</span>
					<el-input style="width: 101px;" placeholder="请输入" v-model="totalLast" clearable/>
				</el-form-item>
				<!-- <el-form-item label="运费:" prop="freight">
					<el-select v-model="dataFilter.freight" class="writeWidth" placeholder="请选择" clearable>
						<el-option v-for="item in opt3" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item> -->
				<!-- <el-form-item label="司机:" prop="driver_name">
					<el-input placeholder="请输入" style="width: 233px;" v-model="dataFilter.driver_name" clearable/>
					<el-select v-model="value" class="writeWidth" placeholder="请选择">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item> -->
				<!-- <el-form-item label="业务员:" prop="sales_name">
					<el-input placeholder="请输入" style="width: 233px;" v-model="dataFilter.sales_name" clearable/>
				</el-form-item> -->
				<el-form-item label="客户类型:" prop="customer_type">
					<el-select v-model="dataFilter.customer_type" class="writeWidth" placeholder="请选择" clearable>
						<el-option v-for="(item,index) in options" :key="index" :label="item.name" :value="item.id" />
					</el-select>
				</el-form-item>
				<!-- <el-form-item label="集团:" prop="group">
					<el-select v-model="dataFilter.group" class="writeWidth" placeholder="请选择" clearable>
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item> -->
				<!-- <el-form-item label="区域:" prop="area">
					<el-select v-model="dataFilter.area" class="writeWidth" placeholder="请选择" clearable>
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item> -->
				<!-- <el-form-item label="是否打印:" prop="print">
					<el-select v-model="dataFilter.print" class="writeWidth" placeholder="请选择" clearable>
						<el-option v-for="item in opt4" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item> -->
				<!-- <el-form-item prop="user">
					<span slot="label" style="display: flex;">
						<div style="font-size: 12px;">商品价格</div>
						<tooltip-msg messages="需要发货日期筛选为1天才能进行商品价格的筛选" place="bottom" />
						:
					</span>
					<el-input v-model="dataFilter.user" class="writeWidth" disabled placeholder=""  clearable/>
				</el-form-item> -->
				<el-form-item label="商品:" prop="product">
					<el-input v-model="dataFilter.product" class="writeWidth" placeholder="请选商品名/助记码/编码/别名/关键字" clearable/>
				</el-form-item>
				<!-- <el-form-item label="订单来源:" prop="origin">
					<el-select v-model="dataFilter.origin" class="writeWidth" placeholder="请选择">
						<el-option v-for="item in optorigin" :key="item.value" :label="item.label"
							:value="item.value" />
					</el-select>
				</el-form-item> -->
				<!-- <el-form-item label="库房:" prop="warehouse">
					<el-select v-model="dataFilter.warehouse" class="writeWidth" placeholder="请选择" clearable>
						<el-option v-for="item in opt5" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item> -->
				<!-- <el-form-item label="备注:" prop="note">
					<el-select v-model="dataFilter.note" class="writeWidth" placeholder="请选择" clearable>
						<el-option v-for="item in opt6" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item> -->
				<!-- <el-form-item label="是否首单:" prop="single">
					<el-select v-model="dataFilter.single" class="writeWidth" placeholder="请选择" clearable>
						<el-option v-for="item in opt7" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item> -->
				<!-- <el-form-item label="货物状态:" prop="goods">
					<el-select v-model="dataFilter.goods" class="writeWidth" placeholder="请选择" clearable>
						<el-option v-for="item in opt8" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item> -->
				<el-form-item label="订单状态:" prop="status">
					<el-select v-model="status" style="width: 233px;" placeholder="请选择订单状态"  clearable>
						<el-option v-for="(item,index) in statusList" :key="index" :label="item.label"
							:value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<!-- <br />
				<el-form-item label="订单标签:" />
				<br /> -->
				<br />
				<el-form-item style="margin-left: 80px;">
					<el-button type="primary" @click="handleSearch">查询</el-button>
					<el-button @click="rest">重置</el-button>
					<!-- <el-button>导出</el-button> -->
				</el-form-item>
			</div>
		</el-form>
		<!-- <div style="padding-bottom: 16px;">
			<el-button plain @click="gocreate">新增</el-button>
			<el-button plain @click="goscenenorder">新增现场采购单</el-button>
			<el-button plain>导入订单</el-button>
		</div> -->

		<el-table :data="tableData.list" style="width: 100%;" v-loading="listLoading">
			<!-- <el-table-column align="center" fixed>
				<template slot="header" slot-scope>
					<i class="el-icon-s-operation"></i>
				</template>
			</el-table-column> -->
			<el-table-column fixed label="订单号" prop="no" width="200">
			</el-table-column>
			<el-table-column label="订单创建时间" prop="createTime" width="180" />
			<el-table-column label="客户名称" prop="customerInfo.name"/>
			<!-- <el-table-column label="客户编码" prop="customerId" width="120" /> -->
			<!-- <el-table-column label="押金框金额" prop="frameTotal" width="120" /> -->
			<el-table-column label="类型价格总金额(元)"  width="180">
				<template slot-scope="scope">
					{{ scope.row.total | filterMoney }}
				</template>
			</el-table-column>
			<el-table-column label="市场价总金额(元)" v-if="roles != 'customer'" width="180">
				<template slot-scope="scope">
					{{ scope.row.shelfTotal | filterMoney }}
				</template>
			</el-table-column>
			<!-- <el-table-column label="发货金额(元)" prop="sendTotal" width="120" /> -->
			<!-- <el-table-column label="运费" prop="shippingCost" /> -->
			<!-- <el-table-column label="退货金额(元)" prop="refundAmount" width="120"/> -->
			<!-- <el-table-column label="发货日期" prop="deliveryDate" width="180" :formatter="dateFormat" /> -->
			<!-- <el-table-column label="发货日期" prop="deliveryDate" width="180"/> -->
			<!-- <el-table-column label="仓库" prop="warehouse_name" /> -->
			<!-- <el-table-column label="订单标签" prop="order_label" /> -->
			<!-- <el-table-column label="打印次数" prop="print_num" /> -->
			<el-table-column label="订单状态">
				<template slot-scope="scope">
					{{
					  scope.row.status == 0
					  ?'已取消'
					  :scope.row.status == 1
					  ? '待确认'
					  : scope.row.status == 2
					  ? '待发货'
					  : scope.row.status == 3
					  ? '待收货'
					  : scope.row.status == 4
					  ? '部分发货'
					  : scope.row.status == 5
					  ? '待付款'
					  : scope.row.status == 6
					  ? '已完成':'退货'
				  }}
				</template>
			</el-table-column>
			<el-table-column label="订单来源" prop="origin" />
			<el-table-column label="备注" prop="remarks" />
			<!-- <el-table-column label="付款状态" prop="paymentStatus">
				<template slot-scope="scope">
					{{
						scope.row.paymentStatus == 1
						  ? '未付款'
						  : scope.row.paymentStatus == 2
						  ? '已付款'
						  : '部分付款'
					  }}
				</template>
			</el-table-column> -->
			<!-- <el-table-column label="线路" prop="name" />
			<el-table-column label="司机" prop="name" />
			<el-table-column label="业务员" prop="name" />
			<el-table-column label="送货时间" prop="name" /> -->

			<el-table-column fixed="right" label="操作" width="220" prop="zip">
				<template slot-scope="scope">
					<!-- <el-popconfirm title="是否确定本订单？" @confirm="sure(scope.row,2)" >
						<el-button slot="reference" size="mini" type="text" v-permissions="['Admin','business','supplier']" v-if="scope.row.status == 1">
							确认订单
						</el-button>
					</el-popconfirm> -->
					<el-button size="small" type="text" style="margin-right:4px;"
						 @click="handleEdit(scope.row)" >
						订单详情
					</el-button>

					<!-- <el-popconfirm title="确定核算此条数据吗？" @confirm="accounting(scope.row)">
						<el-button slot="reference" size="mini" type="text" style="margin-right:4px;">
							核算
						</el-button>
					</el-popconfirm> -->
					<!-- <el-button size="small" type="text" style="margin-right:4px;">打印</el-button>
					<el-popconfirm title="确定操作此商品吗？" @confirm="shelves(scope.row)">
						<el-button slot="reference" size="mini" type="text">
							导出
						</el-button>
					</el-popconfirm> -->
					<el-button size="small" type="text" style="margin-right:4px;"
						 @click="cancel(scope.row,0)" v-if="scope.row.status == 1" v-permissions="['Admin']">
						取消订单
					</el-button>
					<!-- <el-popconfirm title="确定取消本订单吗？" @confirm="sure(scope.row,6)" >
						<el-button slot="reference" size="mini" type="text" >
							取消订单
						</el-button>
					</el-popconfirm> -->
					<!-- <el-popconfirm title="确定关闭本订单吗？" @confirm="deleteRow(scope.row)">
						<el-button slot="reference" size="mini" type="text">
							关闭
						</el-button>
					</el-popconfirm> -->
				</template>
			</el-table-column>
		</el-table>
		<div class="bottom-desc">
			<div style="margin-top: 20px;">
				<span style="padding: 0 6px;">当前页类型价合计金额:{{ combined | filterMoney }}元</span>
				<span style="padding: 0 6px;" v-if="roles != 'customer'">当前页市场价合计金额:{{ sccombined | filterMoney }}元</span>
			</div>
			<el-pagination background @current-change="currentChange" @size-change="sizeChange"
				layout="total, prev, pager, next,sizes" :page-size="tableData.pageSize"
				:page-sizes="[10,20, 30, 40, 50]" :total="tableData.total" />
		</div>
		<el-dialog
		  title="提示"
		  :visible.sync="dialogVisible"
		  width="30%"
		  :close-on-click-modal="false">
		  <span>是否确认取消此订单</span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="sure">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	import TooltipMsg from '@/components/TooltipMsg.vue'
	import { getAllProfileType } from '@/api/customer/customerProfile'
	import { getOrderList, detailOrder, exportOrder, getDelivery , listitemsedit, listitemseditTwo} from '@/api/order'
	export default {
		components: {
			TooltipMsg,
		},
		filters: {
			filterMoney(num) {
				return (num / 100).toFixed(2)
			}
		},
		watch: {
			openCol: {
				handler: function(val, w) {
					this.rest()
				},
				deep: true
			},
		},
		data() {
			return {
				activeName: 'first',
				roles:'',
				combined:0,
				sccombined:0,
				dialogVisible:false,
				cancelParams:{},
				cancelIndex:0,
				openCol: true,
				status:[],
				totalFirst: '',
				totalLast: '',
				dataFilter: {
					wis_id: '1',
					from_delivery_date: '',
					to_delivery_date: '',
					order_no: '',
					size: 10,
					current: 1,
					delivery_date: '',
					ctime: '',
					sign_time: '',
					total: [],
					driver_name: '',
					sales_name: '',
					customer_type: '',
					product: '',
					origin: '',
					status: '',
					//送货时间
					deliveryDate: '',
					//付款状态
					payStatus: '',
					//运费
					freight: '',
					//集团
					group: '',
					//区域
					area: '',
					//是否打印
					print: '',
					//库房
					warehouse: '',
					//备注
					note: '',
					//首单
					single: '',
					//货物状态
					goods: ''
				},
				checkedCities: ['上海', '北京'],
				opt1: [{
						value: '0',
						label: '全部送货时间',
					},
					{
						value: '06:00-09:00',
						label: '06:00-09:00',
					},
				],
				opt2: [{
						value: 0,
						label: '全部',
					},
					{
						value: 1,
						label: '未付款',
					},
					{
						value: 2,
						label: '已付款',
					},
					{
						value: 3,
						label: '部分付款',
					},
				],
				opt3: [{
						value: 0,
						label: '全部',
					},
					{
						value: 1,
						label: '有运费',
					},
					{
						value: 2,
						label: '无运费',
					},
				],
				opt4: [{
						value: 0,
						label: '全部',
					},
					{
						value: 1,
						label: '未打印',
					},
					{
						value: 2,
						label: '已打印',
					},
				],
				opt5: [{
						value: 0,
						label: '全部',
					},
					{
						value: 1,
						label: '默认库房',
					},
					{
						value: 2,
						label: '冻货仓库',
					},
				],
				opt6: [{
						value: 0,
						label: '全部',
					},
					{
						value: 1,
						label: '有备注',
					},
					{
						value: 2,
						label: '无备注',
					},
				],
				opt7: [{
						value: 0,
						label: '全部订单',
					},
					{
						value: 1,
						label: '首单',
					},
					{
						value: 2,
						label: '非首单',
					},
				],
				opt8: [{
						value: 0,
						label: '全部',
					},
					{
						value: 1,
						label: '已送达',
					},
					{
						value: 2,
						label: '未送达',
					},
				],
				optorigin: [{
						value: '全部',
						label: '全部',
					},
					{
						value: '后台',
						label: '后台',
					},
					{
						value: '微信公众号',
						label: '微信公众号',
					},
					{
						value: 'PC商城',
						label: 'PC商城',
					},
					{
						value: '商城APP',
						label: '商城APP',
					},
					{
						value: '小程序',
						label: '小程序',
					},
					{
						value: 'OpenApi',
						label: 'OpenApi',
					},
					{
						value: '支付宝服务号',
						label: '支付宝服务号',
					},
					{
						value: 'PC集团',
						label: 'PC集团',
					},
				],
				value: [],
				options: [],
				statusList: [
					{
						value: '0',
						label: '已取消',
					},
					{
						value: '1',
						label: '待确认',
					},
					{
						value: '2',
						label: '待发货',
					},
					{
						value: '3',
						label: '待收货',
					},
					{
						value: '5',
						label: '待付款',
					},
					{
						value: '6',
						label: '已完成',
					},
					{
						value: '7',
						label: '退货',
					},
				],
				tableData: [],
				listLoading: true,
			}
		},
		async created() {
			this.roles = this.$store.state.user.roles
			await this.getList()
			this.getCustomer()
		},
		methods: {
			async getCustomer() {
				const res = await getAllProfileType()
				this.options = res.data
			},
			dateFormat: function(row, column) {
				var date = row[column.property];
				return this.$moment(date).format("YYYY-MM-DD HH:mm:ss") != 'Invalid date' ? this.$moment(date).format(
					"YYYY-MM-DD HH:mm:ss") : '';
			},
			async getList() {
				this.listLoading = true
				this.dataFilter.total = []
				this.dataFilter.status = this.status?this.status.toString():''
				this.dataFilter.delivery_date = this.dataFilter.delivery_date == null?'':this.dataFilter.delivery_date
				// this.dataFilter.note = this.dataFilter.note == 0?'':this.dataFilter.note == 1?true:false
				// console.log(this.totalFirst,this.totalLast,'999999999')
				if(this.totalFirst){
					this.dataFilter.total.push(this.totalFirst * 100)
				}else{
					this.dataFilter.total.push(0)
				}
				if(this.totalLast){
					this.dataFilter.total.push(this.totalLast * 100)
				}else{
					this.dataFilter.total.push(1000000000)
				}
				const res = await getOrderList(this.dataFilter)
				this.tableData = res
				let arr = JSON.parse(JSON.stringify(this.tableData.list))
				let money = 0
				let scmoney = 0
				arr.forEach( e=>{
					money = money + e.total
					scmoney = scmoney + e.shelfTotal
				})
				this.combined = money
				this.sccombined = scmoney
				this.listLoading = false
			},
			//切换状态
			async handleClick(item) {
				// console.log(item.index,'000000000')
				if (item.index == '0') {
					this.status = null
				} else {
					this.status = item.index
				}
				// console.log(this.status,'000000000')
				await this.getList()
			},
			//搜索
			handleSearch() {
				this.getList()
			},
			rest() {
				this.$refs.ruleForm.resetFields();
				this.status = []
				this.totalFirst = ''
				this.totalLast = ''
			},
			//关闭
			async deleteRow(e) {
				var res = await detailOrder({
					id: e.id
				})
				if (res.status == '200') {
					this.$message.success('删除成功')
					this.getList()
				} else {
					this.$message(res.message)
				}
			},
			cancel(i,j) {
				this.dialogVisible = true
				this.cancelParams = i
				this.cancelIndex = j
			},
			//确认订单
		 	async sure() {
				let res = await listitemseditTwo({
					id: this.cancelParams.id,
					status:this.cancelIndex
				})
				if (res.status == '200') {
					this.$message.success('操作成功')
					this.dialogVisible = false
					this.getList()
				} else {
					this.$message(res.message)
				}
			},
			handleEdit(item) {
				// sessionStorage.setItem('orderList',JSON.stringify(item))
				this.$router.push({ path: '/order/editor', query: { id: item.id} })
			},
			clickOpen() {
				this.openCol = !this.openCol
			},
			gocreate() {
				this.$router.push({ path: '/order/addneworder', query: { status: this.dataFilter.status } })
			},
			goDetail(item) {
				this.$router.push({ path: '/order/orderDetail', query: { id: item.id } })
			},
			goscenenorder() {
				this.$router.push('/order/addsceneorder')
			},
			handles(row) {
				// console.log(row)
			},
			currentChange(e) {
				this.dataFilter.current = e
				this.getList()
			},
			sizeChange(e) {
				this.dataFilter.size = e
				this.getList()
			},
			//核算
			async accounting() {
				var res = await exportOrder()
				console.log(res)
			},
			//导出
			async shelves() {
				var res = await exportOrder()
				console.log(res)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.contents {
		padding: 0 20px;

		.no_Code {
			color: #1890ff;
			cursor: pointer;
		}

		.writeWidth {
			width: 233px;
		}

		.el-dropdown-link {
			cursor: pointer;
			color: #409eff;
		}

		.el-icon-arrow-down {
			font-size: 12px;
		}

		.bottom-desc {
			padding: 10px 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
</style>
